<template>
	<view class="interactiveBar">
		<view class="info">
			<view class="left">
				<view class="item" v-if="showType==0">
					<uni-icons type="redo" size="28" color="#999"></uni-icons>
				</view>
				<view class="item" v-if="showType==1" @click="clickCommentBtn">
					<view class="input">
						评价一下...
					</view>
				</view>
			</view>
			<view class="right">
				<!-- 喜爱 -->
				<view class="item" @click="clickLike">
					<uni-icons type="heart" v-if="true" size="28" color="#999"></uni-icons>
					<uni-icons type="heart-filled" v-else size="28" color="#dd524d"></uni-icons>
					<text>12</text>
				</view>
				<!-- 收藏 -->
				<view class="item" @click="clickCollect">
					<uni-icons type="star" v-if="true" size="28" color="#999"></uni-icons>
					<uni-icons type="star-filled" v-else size="28" color="#f0ad4e"></uni-icons>
					<text>12</text>
				</view>
				<!-- 评论 -->
				<view class="item" v-if="showType==0">
					<navigator url="/pages/detail/detail">
						<uni-icons type="chatbubble" size="28" color="#999"></uni-icons>
					</navigator>
				</view>
				<view class="item" v-if="showType==1">
					<uni-icons type="redo" size="28" color="#999"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	defineProps({
		showType: {
			type: Number,
			default: 0
		}
	})
	
	const emit = defineEmits(['comment']) 	// 子类向父类传递信息
	
	// 点击点赞
	const clickLike = ()=>{
		console.log("点赞");
	}
	
	// 点击收藏
	const clickCollect = ()=>{
		console.log("收藏");
	}
	
	// 点击评论
	const clickCommentBtn = ()=>{
		console.log("评论");
		emit("comment");
	}
	
</script>

<style lang="scss" scoped>
	.interactiveBar {
		.info {
			height: 130rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx; // 左右间隔	

			.item {
				display: flex;
				align-items: center;
				padding: 10rpx 15rpx;
				color: #999;
			}

			.left {				
				flex: 1; // 自动补全宽度
				margin-right: 15rpx;

				.item {
					padding-left: 0; // 消除父级item的padding影响，目的为了对齐美观
					.input {
						width: 100%;
						height: 70rpx;
						background: #f7f7f7;
						border-radius: 70rpx;
						display: flex;
						align-items: center;
						padding: 0 30rpx;
					}
				}
			}

			.right {
				display: flex;
				justify-content: space-between;

				.item:last-child {
					padding-right: 0; // 对最后一个子元素，消除padding影响
				}

			}
		}
	}
</style>